<template>
	<view class="">
		<!-- <NavBar title="集采详情信息"></NavBar> -->
		<view class="collectinformation tn-padding-xs">
			<text class="tn-margin-left-xs tn-text-md tn-margin-bottom-xs tn-text-bold tn-text-lg">{{Data.title}}</text>
			<view class="content tn-padding-sm tn-flex tn-flex-direction-column tn-margin-top-xs">
				<view class="tn-flex tn-flex-row-between tn-margin-bottom-xs tn-padding-left-sm tn-padding-right-sm">
					<view class="tn-flex-1 tn-flex tn-flex-direction-column" style="max-width: 60%;">
						<view class="tn-flex tn-flex-col-center tn-margin-bottom-xs">
							<text class="text-label">收获地址:</text>
							<text class="tn-flex-1 tn-text-ellipsis">{{Data.address}}</text>
						</view>
						<view class="tn-flex tn-flex-col-center">
							<text class="text-label">报名截止:</text>
							<text class="tn-flex-1 tn-text-ellipsis">{{Data.baotime}}</text>
						</view>
					</view>
					<tn-button open-type="share" shape="round" fontSize="32" width="200rpx" height="80rpx"
						backgroundColor="#ff1313" fontColor="tn-color-white">
						<text>分享</text>
						<text class="tn-icon-send-fill"></text>
					</tn-button>
				</view>
				<view class="tn-flex tn-flex-row-between tn-margin-bottom-sm tn-padding-left-sm tn-padding-right-sm">
					<view class="tn-flex tn-flex-col-center">
						<text class="text-label">团长:</text>
						<text>{{Data.name}}</text>
					</view>
					<view class="tn-flex tn-flex-col-center">
						<text class="text-label">联系电话:</text>
						<text>{{Data.phone}}</text>
					</view>
				</view>
				<view class="tn-flex tn-flex-row-between tn-padding-left-xs tn-padding-right-xs tn-margin-bottom-sm">
					<text>我的需求</text>
					<text>参与({{Data.counts}})</text>
				</view>
				<view class="demandTable tn-padding-xs tn-margin-bottom-xs" style="position: relative;">
					<view
						class="tn-flex tn-flex-row-around tn-flex-col-center tn-padding-bottom-xs tn-border-solid-bottom">
						<text class="tn-flex-1 tn-text-center">名称</text>
						<text class="tn-flex-1 tn-text-center">我的需求</text>
						<text class="tn-flex-1 tn-text-center">我的预算</text>
						<text class="tn-flex-1 tn-text-center">总参与</text>
					</view>
					<view class="">
						<view class="tn-flex tn-flex-row-around tn-flex-col-center tn-margin-bottom-xs tn-margin-top-xs"
							v-for="v,i in Data.product" :key="v.id">
							<text class="tn-flex-1 tn-text-center">{{v.pro_name}}</text>
							<view class="tn-flex-1 tn-flex tn-flex-col-center tn-flex-row-center">
								<input type="number" v-model="v.pro_number"
									class="tn-border-solid tn-text-center tn-margin-right-xs"
									style="width: 40%;border-radius: 5px;" @focus="focusNum(v.pro_number)"
									@blur="revNum(v.pro_number)">
								<text>{{' '+v.pro_danwei}}</text>
							</view>
							<text class="tn-flex-1 tn-text-center">{{v.pro_price}}元</text>
							<text class="tn-flex-1 tn-text-center">{{v.count}}</text>
						</view>
					</view>
					<view class="tn-flex tn-flex-row-center tn-flex-col-center tn-margin-top-xs"
						style="position: absolute;left: 0;bottom: 20rpx;width: 100%;" v-if="tagsType==2">
						<tn-button width="500rpx" height="60rpx" backgroundColor="#ff1313" fontColor="#ffffff"
							fontSize="30" @click="toStatistics">
							<view
								class="tn-flex tn-flex-row-around tn-flex-col-center tn-padding-left-sm tn-padding-right-sm"
								style="width: 100%;height: 100%;">
								<text class="tn-icon-all"></text>
								<text>数据统计/招标</text>
							</view>
						</tn-button>
					</view>
				</view>
				<text class="tn-margin-left-sm tn-margin-top-xs">集采留言</text>
				<view class="messageBox tn-flex-1 tn-margin-top-xs">
					<scroll-view class="chat" scroll-y="true" scroll-with-animation="true"
						:scroll-into-view="scrollToView">
						<view class="chat-main" :style="{paddingBottom:inputh+'px'}">
							<view class="chat-ls" v-for="(item,index) in unshiftmsg" :key="index" :id="'msg'+ index">
								<view class="chat-time" v-if="item.createTime != ''">{{changeTime(item.createTime)}}
								</view>
								<view class="msg-m msg-left" v-if="item.sendName !=  friendName">
									<image class="user-img" :src="item.sendImage"></image>
									<view class="tn-flex tn-flex-direction-column tn-margin-left-xs">
										<text class="tn-margin-left-sm tn-margin-bottom-xs">{{item.sendName}}</text>
										<view class="message" v-if="item.TextType == 0">
											<!-- 文字 -->
											<view class="msg-text">{{item.sendText}}</view>
										</view>
										<view class="message" v-if="item.TextType == 1"
											@tap="previewImg(item.sendText)">
											<!-- 图像 -->
											<image :src="item.sendText" class="msg-img" mode="widthFix"></image>
										</view>
										<!-- <view class="message" v-if="item.TextType == 2"
											@tap="playVoice(item.sendText.voice)"> -->
										<!-- 音频 -->
										<!-- <view class="msg-text voice" :style="{width:item.sendText.time*4+'rpx'}">
												<image src="../../static/icon/Hotline.png" class="voice-img"></image>
												{{item.sendText.time}}″
											</view>
										</view> -->
									</view>

									<!-- <view class="message" v-if="item.TextType == 3" @tap="openLocation(item.sendText)"> -->
									<!-- 位置 -->
									<!-- <view class="msg-map">
											<view class="map-name">{{item.sendText.name}}</view>
											<view class="map-address">{{item.sendText.address}}</view> -->
									<!-- 如果map不起作用，就可以直接用一张图片去替代 -->
									<!-- <map class="map" :longitude="item.sendText.longitude"
												:latitude="item.sendText.latitude"
												:markers="covers(item.sendText)"></map>
										</view>
									</view> -->
								</view>
								<view class="msg-m msg-right" v-if="item.sendName == friendName">
									<image class="user-img" :src="item.sendImage"></image>
									<view class="tn-margin-right-xs">
										<view class="message" v-if="item.TextType == 0">
											<view class="msg-text">{{item.sendText}}</view>
										</view>
										<view class="message" v-if="item.TextType == 1"
											@tap="previewImg(item.sendText)">
											<image :src="item.sendText" class="msg-img" mode="widthFix"></image>
										</view>
										<!-- <view class="message" v-if="item.TextType == 2"
											@tap="playVoice(item.sendText.voice)"> -->
										<!-- 音频 -->
										<!-- <view class="msg-text voice" :style="{width:item.sendText.time*4+'rpx'}">
												{{item.sendText.time}}″
												<image src="../../static/icon/Hotline.png" class="voice-img"></image>
											</view>
										</view> -->
									</view>

									<!-- <view class="message" v-if="item.TextType == 3" @tap="openLocation(item.sendText)"> -->
									<!-- 位置 -->
									<!-- <view class="msg-map">
											<view class="map-name">{{item.sendText.name}}</view>
											<view class="map-address">{{item.sendText.address}}</view>
											<map class="map" :longitude="item.sendText.longitude"
												:latitude="item.sendText.latitude"
												:markers="covers(item.sendText)"></map>
										</view>
									</view> -->
								</view>
							</view>
						</view>
					</scroll-view>
					<submit @inputs="inputs" @heights="heights"></submit>
				</view>
			</view>
		</view>
		<PopUps></PopUps>
	</view>
</template>

<script>
	import dateTime from '../../components/dateTime/dateTime.js';
	import submit from '../../components/submit/submit.vue';
	// import NavBar from '../../components/NavBar/NavBar.vue'
	import PopUps from '../../components/PopUps/PopUps.vue'
	import {
		jicaiLyanApi,
		addLiuyuanApi
	} from '../../apis/collectinformationApi.js'
	import {
		addCanyuApi
	} from '../../apis/participateApi.js';
	import {
		zhaoDetailApi
	} from '../../apis/TenderDetailsApi.js';
	import {
		userinfoApi
	} from '../../apis/indexApi.js'
	import {
		httpURL
	} from '../../utlis/http.js'
	import {
		useToTel
	} from '../../utlis/hook.js';
	//音频播放
	// const innerAudioContext = uni.createInnerAudioContext();

	export default {
		components: {
			// NavBar,
			submit,
			PopUps
		},
		data() {
			return {
				tagsType: 1,
				friendName: "xpq",
				msg: [
					// {
					// 	"sendName": "xpq",
					// 	"receviceName": "゛时光い",
					// 	"sendText": {
					// 		"address": "湖南省岳阳市湘阴县新世纪大道",
					// 		"latitude": 28.68925,
					// 		"longitude": 112.90917,
					// 		"name": "湘阴县政府(新世纪大道北)",
					// 	},
					// 	"createTime": "2022-01-06 12:40:12",
					// 	"updateTime": null,
					// 	"chatmState": 1,
					// 	"TextType": 3
					// }, 
					// {
					// 	"sendName": "゛时光い",
					// 	"receviceName": "xpq",
					// 	"sendText": {
					// 		"voice": "时光匆匆流过",
					// 		"time": 2 //秒
					// 	},
					// 	"createTime": "2022-01-06 12:22:12",
					// 	"updateTime": null,
					// 	"chatmState": 1,
					// 	"TextType": 2
					// }, 
					// 	"createTime": "2022-01-06 12:00:12",
					// 	"updateTime": null,
					// 	"chatmState": 1,
					// 	"TextType": 2
					// }, 
					// {
					// 	"sendName": "xpq",
					// 	"receviceName": "xpq",
					// 	"sendText": "这是第七条未读消息",
					// 	"createTime": "2021-12-19 12:22:03",
					// 	"updateTime": null,
					// 	"chatmState": 1,
					// 	"TextType": 0
					// },
					// {
					// 	"sendName": "゛时光い",
					// 	"receviceName": "xpq",
					// 	"sendText": "爱你啊",
					// 	"createTime": "2021-12-18 20:37:03",
					// 	"updateTime": null,
					// 	"chatmState": 0,
					// 	"TextType": 0
					// }
				],
				// 反转数据接收
				unshiftmsg: [],
				imgMsg: [],
				scrollToView: '',
				oldTime: new Date(),
				inputh: '60',
				Data: {},
				j_id: 0,
				totalCount: 0,
				num: 0
			}
		},
		onShow() {
			userinfoApi(uni.getStorageSync('user').u_id).then(res => {
				if (res.data.msg == '成功') {
					this.friendName = res.data.data.phone;
					// console.log(res)
					this.jicaiLyanInit(res.data.data.phone);
				}
			}).catch(err => {
				console.log(err)
			})
		},
		onShareAppMessage(res) {
			let that = this;
			return {
				title: that.Data.title,
				path: `/pages/collectinformation/collectinformation?id=${that.j_id}&type=1`
			}
		},
		components: {
			submit,
		},
		onLoad(props) {
			this.tagsType = parseInt(props.type)
			this.j_id = props.id;
			zhaoDetailApi(props.id).then(res => {
				// console.log(res)
				if (res.data.msg == '成功') {
					// let _num = 0;
					// res.data.data.product.forEach(v => {
					// 	_num += v.count;
					// })
					// (props.type == 1) && (res.data.data.phone = useToTel(res.data.data.phone))
					this.Data = res.data.data;
					// this.totalCount = _num;
				}
			}).catch(err => {
				console.log(err)
			})
		},
		methods: {
			toStatistics() {
				uni.navigateTo({
					url: `/pages/Statistics/Statistics?id=${this.j_id}`
				})
			},
			focusNum(v) {
				this.num = v;
			},
			revNum(v, i) {
				// console.log(this.num, v)
				if (this.num == v) {
					return
				}
				let _pro = [];
				this.Data.product.forEach(v => {
					_pro.push({
						number: v.pro_number || 0,
						price: v.pro_price || 0,
						content: v.content || 0,
						p_id: v.p_id
					})
				})
				let _data = {
					u_id: uni.getStorageSync('user').u_id,
					j_id: this.j_id,
					pro: JSON.stringify(_pro),
					name: '',
					phone: ''
				}
				addCanyuApi(_data).then(res => {
					// console.log(res)
					if (res.data.msg == '成功') {
						uni.showToast({
							title: '修改成功',
							duration: 1000
						});
					}
				}).catch(err => {
					console.log(err)
				})
			},
			changeTime(date) {
				return dateTime.dateTime1(date);
			},
			jicaiLyanInit(myName) {
				let my = myName || this.friendName;
				jicaiLyanApi(this.j_id).then(res => {
					// console.log(res)
					if (res.data.msg == "成功") {
						let _msg = []
						res.data.data.forEach(v => {
							_msg.push({
								"sendName": my == v.info.phone ? v.info.phone : useToTel(v.info
									.phone),
								"sendImage": 'https://image.580ck.com/jicai/touxian.png',
								"sendText": v.type == 1 ? httpURL + v.content : v.content,
								"createTime": v.create_at,
								"updateTime": null,
								"chatmState": 0,
								"TextType": v.type
							})
						})
						this.msg = _msg;
						this.unshiftmsg = [];
						// 数组倒叙 主要是应对后端传过来的数据
						for (var i = 0; i < _msg.length; i++) {
							//时间间隔处理
							if (i < _msg.length - 1) { //这里表示头部时间还是显示一下
								let t = dateTime.spaceTime(this.oldTime, _msg[i].createTime);
								if (t) {
									this.oldTime = t;
								}
								_msg[i].createTime = t;
							}
							// 获取图片，为下面的预览做准备
							if (_msg[i].TextType == 1) {
								this.imgMsg.push(_msg[i].sendText)
							}
							this.unshiftmsg.push(_msg[i]);
						}
						// 跳转到最后一条数据 与前面的:id进行对照
						this.$nextTick(() => {
							this.scrollToView = 'msg' + (this.unshiftmsg.length - 1)
						})
					}
				}).catch(err => {
					console.log(err)
				})

			},
			// 进行图片的预览
			previewImg(e) {
				let index = 0;
				for (let i = 0; i < this.imgMsg.length; i++) {
					if (this.imgMsg[i] == e) {
						index = i;
					}
				}
				console.log("index", index)
				// 预览图片
				uni.previewImage({
					current: index,
					urls: this.imgMsg,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			// //音频播放
			// playVoice(e) {
			// 	innerAudioContext.src = e;
			// 	innerAudioContext.onPlay(() => {
			// 		console.log('开始播放');
			// 	});
			// },
			//地图定位
			// covers(e) {
			// 	let map = [{
			// 		latitude: e.latitude,
			// 		longitude: e.longitude,
			// 		iconPath: '../../../static/logo.png'
			// 	}]
			// 	return (map);
			// },
			//跳转地图信息
			// openLocation(e) {
			// 	uni.openLocation({
			// 		latitude: e.latitude,
			// 		longitude: e.longitude,
			// 		name: e.name,
			// 		address: e.address,
			// 		success: function() {
			// 			console.log('success');
			// 		}
			// 	});
			// },
			//接受输入内容
			inputs(e) {
				//时间间隔处理
				// let data = {
				// 	"sendName": "゛时光い",
				// 	"sendText": e.message,
				// 	"createTime": new Date(),
				// 	"updateTime": new Date(),
				// 	"chatmState": 1,
				// 	"TextType": e.type
				// };
				// // 发送给服务器消息
				// // onSendWS(JSON.stringify(data));

				// this.unshiftmsg.push(data);
				// // 跳转到最后一条数据 与前面的:id进行对照
				// this.$nextTick(function() {
				// 	this.scrollToView = 'msg' + (this.unshiftmsg.length - 1)
				// })
				// if (e.type == 1) {
				// 	this.imgMsg.push(e.message);
				// }
				let _data = {
					u_id: uni.getStorageSync('user').u_id,
					j_id: this.j_id,
					type: e.type,
					content: e.message
				}
				if (e.type == 1) {
					_data.content = e.data.info
				}
				addLiuyuanApi(_data).then(res => {
					if (res.data.msg == '成功') {
						this.jicaiLyanInit();
					}
				}).catch(err => {
					console.log(err)
				})
				console.log(e)
			},
			//输入框高度
			heights(e) {
				console.log("高度:", e)
				this.inputh = e;
				this.goBottom();
			},
			// 滚动到底部
			goBottom() {
				this.scrollToView = '';
				this.$nextTick(function() {
					this.scrollToView = 'msg' + (this.unshiftmsg.length - 1)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.collectinformation {
		width: 750rpx;

		.content {
			width: 100%;
			background-color: #f7f7f7;
			border-radius: 10rpx;

			.text-label {
				width: 140rpx;
			}

			.demandTable {
				width: 100%;
				border-radius: 20rpx;
				background-color: #ffffff;
				border: 1px solid #d8d8d8;
				height: 280rpx;
				overflow-y: scroll;
			}

			.demandTable::-webkit-scrollbar {
				display: none;
			}

			&>.messageBox {
				width: 100%;
				height: 50vh;
				border-radius: 20rpx;
				background-color: #ffffff;
				border: 1px solid #d8d8d8;

				.chat {
					height: 100%;

					.chat-main {
						padding-left: 32rpx;
						padding-right: 32rpx;
						padding-top: 20rpx;
						// padding-bottom: 120rpx;  //获取动态高度
						display: flex;
						flex-direction: column;
					}

					.chat-ls {
						.chat-time {
							font-size: 24rpx;
							color: rgba(39, 40, 50, 0.3);
							line-height: 34rpx;
							padding: 10rpx 0rpx;
							text-align: center;
						}

						.msg-m {
							display: flex;
							padding: 20rpx 0;

							.user-img {
								flex: none;
								width: 80rpx;
								height: 80rpx;
								border-radius: 20rpx;
							}

							.message {
								flex: none;
								max-width: 480rpx;
							}

							.msg-text {
								font-size: 32rpx;
								color: rgba(39, 40, 50, 1);
								line-height: 44rpx;
								padding: 18rpx 24rpx;
								max-width: 100%;
								word-wrap: break-word;
							}

							.msg-img {
								max-width: 400rpx;
								border-radius: 20rpx;
							}

							.msg-map {
								background: #fff;
								width: 464rpx;
								height: 284rpx;
								overflow: hidden;

								.map-name {
									font-size: 32rpx;
									color: rgba(39, 40, 50, 1);
									line-height: 44rpx;
									padding: 18rpx 24rpx 0 24rpx;
									//下面四行是单行文字的样式
									display: -webkit-box;
									-webkit-box-orient: vertical;
									-webkit-line-clamp: 1;
									overflow: hidden;
								}

								.map-address {
									font-size: 24rpx;
									color: rgba(39, 40, 50, 0.4);
									padding: 0 24rpx;
									//下面四行是单行文字的样式
									display: -webkit-box;
									-webkit-box-orient: vertical;
									-webkit-line-clamp: 1;
									overflow: hidden;
								}

								.map {
									padding-top: 8rpx;
									width: 464rpx;
									height: 190rpx;
								}
							}

							.voice {
								// width: 200rpx;
								min-width: 100rpx;
								max-width: 400rpx;
							}

							.voice-img {
								width: 28rpx;
								height: 36rpx;
							}
						}

						.msg-left {
							flex-direction: row;

							.msg-text {
								margin-left: 16rpx;
								background-color: #ededed;
								border-radius: 0rpx 20rpx 20rpx 20rpx;
							}

							.ms-img {
								margin-left: 16rpx;
							}

							.msh-map {
								margin-left: 16rpx;
								border-radius: 0rpx 20rpx 20rpx 20rpx;
							}

							.voice {
								text-align: right;

							}

							.voice-img {
								float: left;
								transform: rotate(180deg);
								width: 28rpx;
								height: 36rpx;
								padding-bottom: 4rpx;
							}
						}

						.msg-right {
							flex-direction: row-reverse;

							.msg-text {
								margin-right: 16rpx;
								background-color: #ffdada;
								border-radius: 20rpx 0rpx 20rpx 20rpx;
							}

							.ms-img {
								margin-right: 16rpx;
							}

							.msh-map {
								margin-left: 16rpx;
								border-radius: 20rpx 0rpx 20rpx 20rpx;
							}

							.voice {
								text-align: left;

							}

							.voice-img {
								float: right;
								padding: 4rpx;
								width: 28rpx;
								height: 36rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
